import React from 'react';
import { useRouter } from 'expo-router';
import { StyleSheet, View, Image, TouchableOpacity, ScrollView } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useAuth } from '@/contexts/AuthContext';

// 默认兴趣爱好和简介
const DEFAULT_INTERESTS = ['太极拳', '象棋', '园艺', '摄影'];
const DEFAULT_BIO = '退休教师，喜欢结交朋友，分享生活经验。希望在这里找到志同道合的朋友一起度过美好的晚年时光。';


// 模拟菜单项
const MENU_ITEMS = [
  {
    id: '1',
    title: '我的活动',
    icon: 'calendar-month',
    badge: 2,
  },
  {
    id: '2',
    title: '我的收藏',
    icon: 'heart',
    badge: 0,
  },
  {
    id: '3',
    title: '健康数据',
    icon: 'heart-pulse',
    badge: 0,
  },
  {
    id: '4',
    title: '设置',
    icon: 'cog',
    badge: 0,
  },
  {
    id: '5',
    title: '帮助中心',
    icon: 'help-circle',
    badge: 0,
  },
];

export default function ProfileScreen() {
  const colorScheme = useColorScheme();
  const tintColor = Colors[colorScheme ?? 'light'].tint;
  const { userInfo } = useAuth();
  const router = useRouter();

  // 使用用户信息或默认值
  const userData = {
    name: userInfo?.name || '未设置姓名',
    age: userInfo?.age || '未设置年龄',
    email: userInfo?.email || '未设置邮箱',
    location: userInfo?.location || '未设置位置',
    avatar: { uri: 'https://randomuser.me/api/portraits/men/75.jpg' },
    interests: DEFAULT_INTERESTS,
    bio: DEFAULT_BIO
  };

  const renderMenuItem = (item) => (
    <TouchableOpacity
      key={item.id}
      style={styles.menuItem}
      onPress={() => {
        // 根据菜单项ID导航到对应页面
        switch(item.id) {
          case '1':
            router.push('/profile/activities');
            break;
          case '2':
            router.push('/profile/favorites');
            break;
          case '3':
            router.push('/profile/health');
            break;
          case '4':
            router.push('/profile/settings');
            break;
          case '5':
            router.push('/profile/help');
            break;
          default:
            console.log(`Navigate to ${item.title}`);
        }
      }}>
      <View style={styles.menuItemLeft}>
        <MaterialCommunityIcons name={item.icon} size={28} color={tintColor} style={styles.menuIcon} />
        <ThemedText style={styles.menuText}>{item.title}</ThemedText>
      </View>
      <View style={styles.menuItemRight}>
        {item.badge > 0 && (
          <View style={styles.badge}>
            <ThemedText style={styles.badgeText}>{item.badge}</ThemedText>
          </View>
        )}
        <MaterialCommunityIcons name="chevron-right" size={24} color="#888" />
      </View>
    </TouchableOpacity>
  );

  return (
    <ThemedView style={styles.container}>
      <View style={styles.header}>
        <ThemedText style={styles.headerTitle}>个人信息</ThemedText>
      </View>
      
      <ScrollView style={styles.scrollView}>
        <View style={styles.profileSection}>
          <Image source={userData.avatar} style={styles.avatar} />
          <View style={styles.profileInfo}>
            <ThemedText style={styles.nameText}>{userData.name}</ThemedText>
            <ThemedText style={styles.ageLocationText}>{userData.age}岁 · {userData.location}</ThemedText>
          </View>
          <TouchableOpacity style={styles.editButton}>
            <MaterialCommunityIcons name="pencil" size={20} color="#fff" />
          </TouchableOpacity>
        </View>
        
        <View style={styles.bioSection}>
          <ThemedText style={styles.bioTitle}>个人简介</ThemedText>
          <ThemedText style={styles.bioText}>{userData.bio}</ThemedText>
        </View>
        
        <View style={styles.interestsSection}>
          <ThemedText style={styles.interestsTitle}>兴趣爱好</ThemedText>
          <View style={styles.interestTags}>
            {userData.interests.map((interest, index) => (
              <View key={index} style={styles.interestTag}>
                <ThemedText style={styles.interestText}>{interest}</ThemedText>
              </View>
            ))}
          </View>
        </View>
        
        <View style={styles.menuSection}>
          <ThemedText style={styles.menuTitle}>菜单</ThemedText>
          {MENU_ITEMS.map(renderMenuItem)}
        </View>
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingTop: 60,
    paddingBottom: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
  },
  scrollView: {
    flex: 1,
  },
  profileSection: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
    position: 'relative',
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginRight: 15,
  },
  profileInfo: {
    flex: 1,
  },
  nameText: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  ageLocationText: {
    fontSize: 16,
    color: '#666',
  },
  editButton: {
    position: 'absolute',
    top: 20,
    right: 20,
    backgroundColor: '#0a7ea4',
    width: 36,
    height: 36,
    borderRadius: 18,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bioSection: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  bioTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  bioText: {
    fontSize: 16,
    lineHeight: 24,
  },
  interestsSection: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  interestsTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  interestTags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  interestTag: {
    backgroundColor: '#E8F4F8',
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 20,
    marginRight: 10,
    marginBottom: 10,
  },
  interestText: {
    fontSize: 16,
    color: '#0a7ea4',
  },
  menuSection: {
    padding: 20,
  },
  menuTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  menuItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  menuItemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuIcon: {
    marginRight: 15,
  },
  menuText: {
    fontSize: 18,
  },
  menuItemRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  badge: {
    backgroundColor: 'red',
    width: 20,
    height: 20,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10,
  },
  badgeText: {
    color: 'white',
    fontSize: 12,
    fontWeight: 'bold',
  },
});